<template>
  <div class="myvideo">
      <selectedmv :selectedmvs="selectedMvList"></selectedmv>
      <div class="rankingList" @click="goRankingList">
        <div class="rankingListTitle" v-if="songList">
          <p>排行榜<i class="iconfont icon-you"></i></p>
          <span>更新时间：{{mydate(songList.updateTime)}}</span>
        </div>
        <div class="rankingListImg" v-if="songList">
            <img :src="songList.data[0].cover" >
            <i class="iconfont icon-bofang1"></i>
        </div>
      </div>
      <moremv :moreMvList="moreMvList"></moremv>
      <div class="loading">奋力加载中...</div>
  </div>
</template>

<script>
import selectedmv from './children/selectedMv.vue';
import moremv from './children/moreMV.vue';
import util from "@/assets/js/util.js";
export default {
  name: "myvideo",
  components: {
    selectedmv,moremv
  },
  props: {},
  data() {
    return {
      selectedMvList:"",
      moreMvList:"",
      songList:""
    };
  },
  watch: {},
  computed: {},
  methods: {
    mydate: util.transformDate2,
    // 精选MV
    getSelectedMv(){
       this.$http('/personalized/mv').then(res=>{
          console.log(res.data.result);
          this.selectedMvList = res.data.result;
      })
    },
    // 更多MV
    getMoreMv(){
      this.$http('/mv/first').then(res=>{
        console.log(res.data.data);
        this.moreMvList = res.data.data
      })
    },

    goRankingList(){
      this.$router.push({
        name:"inland"
      })
    }
  },
  created() {
    this.getSelectedMv();     
    this.getMoreMv();
    this.$http("/top/mv", { params: { area: "内地", limit: 20 } }).then(res => {
      //   console.log(res);

      this.songList = res.data;
      
      console.log(this.songList);
    });
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.myvideo{
  .rankingList{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: vw(20) vw(16);
    border-bottom: vw(1) solid #ccc;
    .rankingListTitle{

      p{
        font-size: vw(20);
        font-weight: bold;

        i{
          color: #777;
          font-size: vw(18);
         padding-left: vw(6);
        }
      }
      span{
         font-size: vw(14);
         color: #777;
      }
    }
    .rankingListImg{
      width: vw(80);
      height: vw(45);
      overflow: hidden;
      position: relative;
      border-radius: vw(6);
      img{
        width: 100%;
      }
      i{

        font-size: vw(14);
        position: absolute;
        top: 35%;
        left: 45%;
        color: #ccc;
        
      }
    }
  }
  .loading{
    text-align: center;
    font-size: vw(20);
    color: #777;
  }
}
</style>